<template>
  <div class="layout">
<!--    <van-row >-->
<!--      <van-col-->
<!--        v-for="(col, colIndex) in myItem.cols"-->
<!--        :key="colIndex"-->
<!--        :span="col.span"-->
<!--      >-->
<!--        <div class="topSelect" @click="switchIndex"></div>-->
<!--&lt;!&ndash;          <draggable  style="min-height: 200px" :list="col.list" :group="{ name: 'components', pull: true,put: true}" class="colDraggable">&ndash;&gt;-->
<!--&lt;!&ndash;            <component&ndash;&gt;-->
<!--&lt;!&ndash;              v-for="(item, colDataIndex) in col.list"&ndash;&gt;-->
<!--&lt;!&ndash;              :key="colDataIndex"&ndash;&gt;-->
<!--&lt;!&ndash;              :is="item.componentName"&ndash;&gt;-->
<!--&lt;!&ndash;              style="padding: 10px"&ndash;&gt;-->
<!--&lt;!&ndash;              :myItem="item"&ndash;&gt;-->
<!--&lt;!&ndash;              @click.stop="switchChildIndex(item,colIndex)"&ndash;&gt;-->
<!--&lt;!&ndash;            ></component>&ndash;&gt;-->
<!--&lt;!&ndash;          </draggable>&ndash;&gt;-->
<!--        <draggable style="min-height: 220px" :list="col.list" group="components" class="colDraggable">-->
<!--          <div :key="colDataIndex" @click.stop="switchChildIndex(item)"-->
<!--               v-for="(item, colDataIndex) in col.list">-->
<!--            <component-->
<!--              :is="item.componentName"-->
<!--              style="padding: 10px"-->
<!--              :myItem="item"-->
<!--            ></component>-->
<!--          </div>-->
<!--        </draggable>-->
<!--      </van-col>-->
<!--    </van-row>-->

    <el-row type="flex">
      <el-col :span="col.span"  v-for="(col, colIndex) in myItem.cols" :key="colIndex"  >
        <div class="topSelect"></div>
       <div>
         <draggable :style="{minHeight: '220px',display:'flex',flexWrap:isWrap?'wrap':'',width: width+'px'}"  style="display: flex;flex-wrap: wrap"  :list="col.list" group="components" class="colDraggable">
           <div  :key="colDataIndex" @click.stop="switchChildIndex(item)" v-for="(item, colDataIndex) in col.list">
             <component
               :is="item.componentName"
               :style="{padding: '10px',width: '100%'}"
               :myItem="item"
               :width="width"
             ></component>
           </div>
         </draggable>
       </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import draggable from "vuedraggable"
import basicsMixin from "@/common/js/h5/importBasics"
import formMixin from "@/common/js/h5/importForm"
import feebackMixin from "@/common/js/h5/importFeeback"
import showMixin from "@/common/js/h5/importShow"
import navMixin from "@/common/js/h5/importNav"
import businessMixin from "@/common/js/h5/importBusiness"
import {createLogger} from "vuex";

export default {
  mixins: [
    basicsMixin,
    formMixin,
    feebackMixin,
    showMixin,
    navMixin,
    businessMixin,
  ],
  computed: {
    animateClass() {
      return this.$store.state.rightPanelClass.animateClass
    },
    // widthAdd:{
    //   get(){
    //     return this.width
    //   },
    //   set(val){
    //     console.log('val',val)
    //   }
    // }
  },
  components: {
    draggable,
    VanLayout:()=>import('@/components/h5/basics/VanLayout.vue')
  },
  data() {
    return {
      isWrap:this.myItem.propValues[1].value || false,
      // width:this.myItem.propValues[2].value.num
      width: 200
    };
  },
  props: {
    myItem: {
      type: Object,
    },
    width: {
      type: Number,
      default: 200
    },
  },
  watch:{
    myItem:{
      handler(newVal,oldVal){
        // console.log('newVal',newVal)
        this.isWrap = newVal.propValues[1].value
        // this.width = newVal.propValues[2].value.num
        this.width = newVal.propValues[2].value.num
        console.log('isWrap',this.isWrap)
        console.log('width',this.width)
      },
      deep:true
    }
  },

  methods: {
    switchIndex() {
      console.log('switchIndex',this.myItem)
      if (this.animateClass == "myBounceOutRight") {
        // 右边面板由收缩状态变为展开状态
        this.$store.commit("rightPanelFold")
      }
      this.$store.commit("updateMyItem", this.myItem)
    },
    switchChildIndex(myItem) {
      console.log('myItem',myItem)
      if (this.animateClass == "myBounceOutRight") {
        // 右边面板由收缩状态变为展开状态
        this.$store.commit("rightPanelFold")
      }
      this.$store.commit("updateMyItem", myItem)
    }
  }
}
</script>
<style scoped>
.el-col {
  border: 1px solid lightgray;
}

.colDraggable {
  min-height: 60px;
}

.topSelect {
  width: 100%;
  height: 10px;
  background-color: lightblue;
}

.topSelect:hover {
  background-color: blue;
}
</style>
